<template>
	<div class="header">
		<transition name="fade-slide">
			<div class="header-mobile" v-show="this.v_common_navShow">
				<router-link class="header-mobile_img" to="/">
					<img class="header-web_left-img" :src="this.v_system_logo" />
				</router-link>
				<span class="header-mobile_title">{{ this.v_common_navTitle }}</span>
				<router-link class="header-mobile_search" to="/"><iv-icon type="ios-search-outline" size="30"></iv-icon></router-link>
				<span @click="mobileAvatarHandler">
					<iv-avatar class="header-mobile_avatar" :src="avatar" :size="this.v_system_controlSize" shape="square"></iv-avatar>
				</span>
			</div>
		</transition>
		<transition name="fade-slide">
			<div class="header-web" v-show="this.v_common_navShow">
				<router-link class="header-web_left" to="/">
					<img class="header-web_left-img" :src="this.v_system_logo" />
					<span class="header-web_left-title">{{ this.v_system_title }}</span>
					<span class="header-web_left-motto">{{ this.v_system_motto }}</span>
				</router-link>
				<ul class="header-web_right">
					<li class="header-web_right-search">
						<form action="/articles/search"><iv-input v-model="keyword" search :placeholder="$t('system.prompt.home_search')" /></form>
					</li>
					<li v-for="(item, _index) in menus" :key="_index" @click="menuHandler(_index)">
						<!-- 菜单 -->
						<router-link v-if="item.type === 0" :to="item.to" :class="{ current: _index === menuActive }">{{ $t('system.menu.' + item.key) }}</router-link>
					</li>
					<li @click="avatarHandler">
						<iv-avatar :class="{ 'header-web_right-avatar': avatarActive }" :src="avatar" :size="this.v_system_controlSize" shape="square"></iv-avatar>
					</li>
				</ul>
			</div>
		</transition>
		<side-bar ref="header_side_bar"></side-bar>
	</div>
</template>

<script>
import SideBar from '@/views/common/header/side-bar';
export default {
	components: { SideBar },
	data() {
		return {
			keyword: '',
			menus: this.$store.getters.system_navMenus,
			menuActive: -1,
			avatarActive: 0,
			login: false
		};
	},
	created() {
		this.keyword = this.$route.query.keywords;
		this.initData();
	},
	computed: {
		avatar: {
			get() {
				let user_headUrl = this.$store.getters.user_headUrl;
				if (user_headUrl) {
					return user_headUrl;
				}
				let avatar = this.$store.getters.system_avatar;
				let user_sex = this.$store.getters.user_sex;
				if (!avatar) {
					avatar = require('@/assets/img/avatar_' + user_sex + '.png');
				}
				return avatar;
			}
		}
	},
	mounted() {
		// 给页面绑定滑轮滚动事件
		if (document.addEventListener) {
			// firefox
			document.addEventListener('DOMMouseScroll', this.watchScroll, false);
		}
		// 滚动滑轮触发scrollFunc方法  //ie 谷歌
		window.onmousewheel = document.onmousewheel = this.watchScroll;
	},
	methods: {
		initData() {
			let that = this
			// 初始化系统
			this.$store.dispatch('user/getUserInfo').then(res => {
				that.login = this.v_user_login
			})
		},
		watchScroll(e) {
			e = e || window.event;

			if (window.scrollY < 65) {
				return;
			}

			let navShow = this.$store.getters.common_navShow;
			if (e.wheelDelta) {
				if (e.wheelDelta > 0 && navShow === false) {
					// 当滑轮向上滚动
					this.$vuex('common.navShow', true);
				}
				if (e.wheelDelta < 0 && navShow === true) {
					// 当滑轮向下滚动
					this.$vuex('common.navShow', false);
				}
			} else if (e.detail) {
				if (e.detail < 0 && navShow === false) {
					// 当滑轮向上滚动
					this.$vuex('common.navShow', true);
				}
				if (e.detail > 0 && navShow === true) {
					// 当滑轮向下滚动
					this.$vuex('common.navShow', false);
				}
			}
		},
		menuHandler(_index) {
			this.menuActive = _index;
			this.avatarActive = 0;
		},
		avatarHandler() {
			this.menuActive = -1;
			this.avatarActive = 1;
		},
		mobileAvatarHandler() {
			let sidebar = this.$refs.header_side_bar;
			this.$nextTick(function() {
				sidebar.toggleSideBar();
			});
		}
	}
};
</script>

<style lang="scss">
body.root {
	font-family: $body-font;
	font-size: $body-font-size;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: $default-background-color;
	padding-top: $header-inner-height;
	@media screen and (max-width: $responsive-md) {
		-webkit-text-size-adjust: none;
	}
	@media screen and (min-width: $responsive-md) {
		padding-top: $header-height;
	}
}
</style>
<style lang="scss" scoped>
@import 'style/index.scss';

.fade-slide-enter,
.fade-slide-leave-to {
	transform: translateY(-70px);
	opacity: 0;
}
.fade-slide-enter-active,
.fade-slide-leave-active {
	transition: all 0.8s ease;
}
</style>
